<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>屏蔽管理</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 120px;
        }
        @media screen and (max-width: 450px){
            .layui-form-item .layui-input-inline {
                margin-left: 150px;
            }
        }
        
        #tableForm{
            padding: 10px 20px;
            display: none;

        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <form id="queryForm" class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productName" autocomplete="off" class="layui-input" placeholder="商品名称" maxlength="20">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">供应商名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="supplierName" autocomplete="off" class="layui-input" placeholder="供应商名称" maxlength="20">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">食堂名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="canteenName" autocomplete="off" class="layui-input" placeholder="食堂名称" maxlength="20">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">类别名称</label>
                            <div class="layui-input-inline">
                                <!-- <select name="categoryName" lay-search>
                                    <option value=""></option>
                                </select>  -->
                                <input type="text" name="categoryId" autocomplete="off" id="tree" lay-filter="tree" class="layui-input">
                                <!-- <input type="text" name="categoryName" autocomplete="off" class="layui-input" placeholder="类别名称" maxlength="20"> -->
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn"  lay-submit lay-filter="searchBth">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary reReset" onclick="javascript:onReset()">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide" id="selectTable" lay-filter="selectTable"></table>
            </div>
        </div>

        <div id="tableForm">
            <div class="layui-form-item">
                <label class="layui-form-label">食堂名称：</label>
                <div class="layui-input-inline">
                  <input type="text" name="canteenName" autocomplete="off" placeholder="食堂名称" class="layui-input" maxlength="20">
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn searchCanteen" >查询</button>
                </div>
            </div>
            <table class="layui-hide" id="canteenTable" lay-filter="canteenTable"></table>
        </div>
    </div>
</body>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container toolbarDemo">
		<button class="layui-btn layui-btn-sm" lay-event="shield">屏蔽食堂</button>
		<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export">导出</button>
	</div>
</script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'table', 'form', 'treeSelect'], function() {
        var http = layui.http,
            table = layui.table,
            form = layui.form,
            treeSelect = layui.treeSelect;
        var excelList,currPage,table_data=[]
        var canteenIdSet = [],goodIdSet = []
		
        // 重置
        window.onReset = function() {
            treeSelect.revokeNode('tree', function(d){});
        }
        
		$('.reReset').click();

        // 分类查询
        // getCategory()
        // function getCategory() {
        //     http.get('admin/product/category/listAllCategory',{},function(res){
        //         if(res.code == 200){
        //             var html = '<option value="">请选择商品类别</option>';
        //             var data = res.data;
        //             for (var i = 0; i < data.length; i++) {
        //                 html += '<option value="' + data[i].categoryName + '">' + data[i].categoryName + '</option>'
        //             }
        //             $('select[name=categoryName]').html(html);
        //             form.render('select');
        //         }else{
        //             layer.msg(res.msg)
        //         }
        //     })
        // }
        getCategory()
        function getCategory() {
            var authentication = localStorage.getItem('xi-can-management-authentication')
            treeSelect.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: TUrl + 'admin/product/category/listAllTree',
                // 异步加载方式：get/post，默认get
                type: 'get',
                headers: {
                    authentication: authentication
                },
                // 占位符
                placeholder: '商品类别',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                style: {
                    folder: {
                        enable: false
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function(d){
                    // // console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    // // console.log(d);
                }
            });
        }

        var selectTable,canteenTable;
        selectTable = http.table({
            elem: '#selectTable',
            url: 'admin/good/shield/canteen/listPage',
            method: 'get',
            id: 'selectTable',
            toolbar: '#toolbarDemo',
            done: function(res, curr, count){
			    excelList = res.data;
                currPage = curr
			},
            cols: [[
                {type:'checkbox',fixed: 'left'}
                ,{field:'mainImage', title: '主图', align : 'center',event: 'imgclick',
                    templet: function (d) {
                        return '<div ><img src="'+TUrl+d.mainImage+'" alt="" width="50px" height="30px"></div>'
                    }
                }
                ,{field:'productName', title: '商品名称', align : 'center',
                    templet: function(d){
                        var html = ''
                        html += '<a class="buttoncolor" href="productDetail.html?id='+d.productId+'">'+d.productName+'</a>'
                        return html
                    }
                }
                ,{field:'unitName', title: '单位', align : 'center'}
                ,{field:'priceRange', title: '价格', align : 'center'}
                ,{field:'categoryName', title: '商品类别', align : 'center'}
                ,{field:'supplierName', title: '供应商名称', align : 'center'}
                ,{field:'shieldCanteenNames', title: '屏蔽食堂名称', align : 'center'}
                ,{field:'', title: '操作', align : 'center',fixed: 'right',width: 230,
                    templet: function (d) {
                        var html = '';
                        html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="single" >屏蔽食堂</button>'
                        
                        return html;
                    }
                }
            ]]
        });

        //查询
        form.on('submit(searchBth)', function (data) {
            let _data = data.field,
				param = _data;
			selectTable.reload({
				page:{curr:1},
				where: param
			})
        })

        // 分配食堂查询
        function canteenFun(supplierIdSet){
            canteenTable = http.table({
                elem: '#canteenTable',
                url: 'admin/canteen/listSimplePage',
                method: 'get',
                id: 'canteenTable',
                height: 300,
                where: {
                    supplierIdSet: supplierIdSet.toString()
                },
                done: function(res, curr, count){
                    var data = res.data;
                    table_data = data
                    //在缓存中找到id ,然后设置data表格中的选中状态
                    //循环所有数据，找出对应关系，设置checkbox选中状态
                    for(var i=0;i< res.data.length;i++){
                        for (var j = 0; j < canteenIdSet.length; j++) {
                            //数据id和要勾选的id相同时checkbox选中
                            if(res.data[i].id == canteenIdSet[j]) {
                                //这里才是真正的有效勾选
                                res.data[i]["LAY_CHECKED"]='true';
                                //找到对应数据改变勾选样式，呈现出选中效果
                                var index= res.data[i]['LAY_TABLE_INDEX'];
                                $('#tableForm .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                $('#tableForm .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                            }
                        }
                    }
                    //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                    var checkStatus = table.checkStatus('canteenTable');
                    if(checkStatus.isAll){
                        $('#tableForm .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                        $('#tableForm .layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                },
                cols: [[
                    {type:'checkbox',fixed: true}
                    ,{field:'canteenName', title: '食堂名称', align : 'center'}
                    ,{field:'openStatus', title: '状态', align : 'center',
                        templet: function (d) {
                            return d.openStatus==1?'启用':'禁用';
                        }
                    }
                ]]
            });
        }
        // 查询
        $(document).on('click','.searchCanteen',function(){
            canteenTable.reload({
				page:{curr:1},
				where: {
                    canteenName: $('#tableForm input[name=canteenName]').val()
                }
			})
        })
        //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
        table.on('checkbox(canteenTable)', function (obj) {
            // // console.log(obj)
            if(obj.checked==true){
                if(obj.type=='one'){
                    canteenIdSet.push(obj.data.id);
                }else{
                    for(var i=0;i<table_data.length;i++){
                        canteenIdSet.push(table_data[i].id);
                    }
                }
            }else{
                if(obj.type=='one'){
                    for(var i=0;i<canteenIdSet.length;i++){
                        if(canteenIdSet[i]==obj.data.id){
                            canteenIdSet.splice(i,1);
                            i--
                        }
                    }
                }else{
                    for(var i=0;i<canteenIdSet.length;i++){
                        for(var j=0;j<table_data.length;j++){
                            if(canteenIdSet[i]==table_data[j].id){
                                canteenIdSet.splice(i,1);
                                i--
                            }
                        }
                    }
                }
            }
            // // console.log(canteenIdSet)
        });

        table.on('tool(selectTable)', function(obj){
            var data = obj.data;
            if(obj.event=='single'){
                // 屏蔽食堂
                canteenFun([data.supplierId])
                canteenIdSet = data.canteenIdSet
                goodIdSet = []
                goodIdSet.push(data.productId)
                http.myOpen({
                    title:'屏蔽食堂',
                    content: $('#tableForm'),
                    area:['600px','500px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){
                        // if (canteenIdSet.length == 0) {
                        //     layer.msg("请勾选需要的食堂");
                        //     return;
                        // }
                        http.postJSON('admin/good/shield/canteen/shieldCanteen',JSON.stringify({
                            canteenIdSet: canteenIdSet,
                            productIdSet: goodIdSet
                        }),function(res){
                            if(res.code==200){
                                layer.msg('操作成功')
                                layer.close(index)
                                table.reload('selectTable');
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                    }
                })
            }
        })

        table.on('toolbar(selectTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data; //获取选中行数据
            if(obj.event=='shield'){ // 批量屏蔽食堂
                if(data.length==0){
                    layer.msg('请勾选需要的商品')
                    return
                }
                var supplierIdSet = []
                canteenIdSet = []
                goodIdSet = []
                for(var i=0;i<data.length;i++){
                    goodIdSet.push(data[i].productId)
                    supplierIdSet.push(data[i].supplierId)
                }
                canteenFun(supplierIdSet)
                http.myOpen({
                    title:'屏蔽食堂',
                    content: $('#tableForm'),
                    area:['600px','500px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){
                        // if (canteenIdSet.length == 0) {
                        //     layer.msg("请勾选需要的食堂");
                        //     return;
                        // }
                        http.postJSON('admin/good/shield/canteen/shieldCanteen',JSON.stringify({
                            canteenIdSet: canteenIdSet,
                            productIdSet: goodIdSet
                        }),function(res){
                            if(res.code==200){
                                layer.msg('操作成功')
                                layer.close(index)
                                table.reload('selectTable');
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                    }
                })
            }else if(obj.event=='export'){ // 导出
				var data = excelList; 
				if (data.length == 0) {
					layer.msg('当前页没有可导出的数据');
					return;
                }
                var param = {
                    page: currPage,
                    limit: 10,
                    authentication: localStorage.getItem('xi-can-management-authentication'),
                    supplierName:  $('input[name=supplierName]').val(),
                    canteenName: $('input[name=canteenName]').val(),
                    productName: $('input[name=productName]').val(),
                    // categoryName: $('input[name=categoryName]').val(),
                    categoryId: $('input[name=categoryId]').val()
                }
                if (param) {  
                    let paramsArray = [];  
                    //encodeURIComponent  
                    Object.keys(param).forEach(key => paramsArray.push(key + '=' + param[key]))  
                    window.open(TUrl+"admin/good/shield/canteen/export?"+paramsArray.join('&'))
                }
			}
        })

    })

</script>
</html>